<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/detail_info.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<script src="js/mui.js"></script>
				<script type="text/javascript">
					mui.init();
				</script>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title"></h1>
					<div class="time_date mydate" id="time1">设置额度</div>
				</header>
				<div class="mui-content">
					<div id="popover" class="mui-popover">
						<p style="text-align: center;">设置当月额度(默认为3000),设置后会修改当前的结余值,结余值为设置值加上原有的收入或减掉原有的支出</p>
						<hr />
					    <form class="mui-input-group form_input">
					      	<div class="mui-input-row">
					      		<label>每月额度</label>
					      		<input id="u_detail_time1" type="text" class="mui-input-clear email" placeholder="数字" name="email" id="" value="3000" />
					      	</div>
							<div class="mui-button-row submit">
								<button id="change" type="button" class="mui-btn mui-btn-primary">修改</button>
								<button id="exit" type="button" class="mui-btn mui-btn-danger">取消</button>
							</div>
					    </form>
					</div>
					<!-- 总体情况 -->
					<div class="info">
						<div class="sum">
							<p class="sum_text">结余</p>
							<p class="sum_money" id="jieyu">0.00</p>
						</div>
						<div class="in_out">
							<div class="in" style="border-right: 2px solid darkgrey;">
								<font size="" color="" class="text">收入</font>
								<font size="" color="" class="money" id="shouru">0.00</font>
							</div>
							<div class="out">
								<font size="" color="" class="text">支出</font>
								<font size="" color="" class="money" id="zhichu">0.00</font>
							</div>
						</div>
					</div>
					<!-- 详情按钮 -->
					<div class="detail_in">
						<div class="mui-input-row">
							<button id="detail_list" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">所有消费记录</button>
							
						</div>
					</div>
					<hr >
					<p style="text-align: center;font-size: 10px;">想查看具体某个分类的所有记录，请点击前一页面的具体分类</p>
					<p style="text-align: center;font-size: 10px; margin-top: -15px;">如修改数据未自动刷新，请手动下拉刷新数据</p>
					<!-- 每个月的信息 -->
					<div class="list">
						<div class="content" v-bind:id="x.detail_id" v-for="x in detail_list">
							<div class="account a">{{x.account.account_name}}&nbsp;&nbsp;&nbsp;{{x.account.account_num}}</div>
							<div class="type b">{{x.detail_type}}</div>
							<div class="num b">{{x.detail_num}}</div>
							<div class="time b">{{x.time.split('.')[0].split('T')[0]}}&nbsp;&nbsp;{{x.time.split('.')[0].split('T')[1]}}</div>
						</div>
					</div>
				</div>
			</div>			
		</div>
		
		
		<script type="text/javascript">
			mui.plusReady(function () {
				window.addEventListener('customEvent', function(event) {
				    // mui.fire()传过来的额外的参数，在event.detail中；
				    var detail = event.detail;
				    // var param = detail.param;
				    // 执行相应的ajax或者操作DOM等操作
					var self = plus.webview.currentWebview();
					var year = self.year;//获得参数
					var month = self.month;//获得参数
					var type = self.type;//获得参数
					var times = year + '-' + month
					my_refresh(type, times)
					
				});
				document.getElementById('jieyu').innerText = parseFloat(localStorage.getItem('jieyu')).toFixed(2)
				document.getElementById('zhichu').innerText = parseFloat(localStorage.getItem('zhichu')).toFixed(2)
				document.getElementById('shouru').innerText = parseFloat(localStorage.getItem('shouru')).toFixed(2)
			})
			
			// 下拉刷新
			mui.init({
				pullRefresh : {
					container:"#pullrefresh",
					down: {
						height:50,
						style:'circle',
						auto:true,
						callback:myRefresh
					}
				}
			});
			// 下拉刷新
			function myRefresh(){
				mui.toast('😐同步数据中...请勿操作', {duration: 500,});
				setTimeout(function(){
					var self = plus.webview.currentWebview();
					var year = self.year;//获得参数
					var month = self.month;//获得参数
					var type = self.type;//获得参数
					document.getElementsByClassName('mui-title')[0].innerHTML = year + '-' + month + '  '+ type
					var times = year + '-' + month
					my_refresh(type, times)
					var month = parseInt(month)
					setTimeout(function(){mui.alert(
						re_local(year, month)
					)},100)
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				},200)
			};
			
			// 刷新列表函数
			function my_refresh(type, times){
				mui.ajax(localStorage.getItem('request_url')+ "cost/user/show_my_detail_type/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid') + "&type=" + type + "&times=" + times,
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						// mui.alert(typeof e.data)
						app.detail_list = e.data
						if(e.data.length ==0){
							mui.toast('😐小主这里空空如也哦~')
						};
						// 延迟加事件
						setTimeout(function(){
							getRadioRes('content');
							mui.toast('😃同步完成...');
						},1500)
					},  
				    error:function(xhr,type,errorThrown){
						var rdata = JSON.parse(xhr.responseText);
						mui.toast(rdata.msg)
				    }  
				});
			}
			// 刷新local函数
			function re_local(year, month){
				mui.ajax(localStorage.getItem('request_url')+ "cost/show_local/?token="+localStorage.getItem('uid'), {
					data:"token=" + localStorage.getItem('uid') + "&year=" + year + "&month=" + month,
					dataType:'json',  
					type:'POST',  
					contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					timeout:2000,  
					success:function show(e){
						localStorage.setItem('jieyu', JSON.stringify(e.data.local_amount))
						localStorage.setItem('zhichu', JSON.stringify(e.data.local_out))
						localStorage.setItem('shouru', JSON.stringify(e.data.local_in))
						document.getElementById('jieyu').innerText = parseFloat(localStorage.getItem('jieyu')).toFixed(2)
						document.getElementById('zhichu').innerText = parseFloat(localStorage.getItem('zhichu')).toFixed(2)
						document.getElementById('shouru').innerText = parseFloat(localStorage.getItem('shouru')).toFixed(2)
					},  
					error:function(xhr,type,errorThrown){
						mui.toast('同步失败...下拉刷新');
						mui.alert(xhr.responseText)
					}  
				});
			}
			
			app = new Vue({
			     el:'.list',
			     data:{
			        detail_list: '',
			     },
			});
			
			// 给记录加事件
			function getRadioRes(className){
				var rdsObj = document.getElementsByClassName(className);
				var checkVal = null;
				for(i=0; i<rdsObj.length;i++){
					rdsObj[i].addEventListener('tap',function(){
						var ids = this.id
						mui.openWindow({
							url:'one_detail.html',
							id:'one_detail.html',
							extras:{
								de_id:ids,
							},
						})
					})
				}
			};
			
			// 点击修改按钮
			document.getElementById('time1').addEventListener('tap',function(){
				mui('.mui-popover').popover('toggle',);
			})
			
			document.getElementById('change').addEventListener('tap',function(){
				var self = plus.webview.currentWebview();
				var year = self.year;//获得参数
				var month = parseInt(self.month);//获得参数
				var num = document.getElementById('u_detail_time1').value
				changed(year, month, num)
				mui('.mui-popover').popover('toggle',);
			})
			document.getElementById('exit').addEventListener('tap',function(){
				mui('.mui-popover').popover('toggle',);
			})
			
			// 重构back函数
			var old_back = mui.back;
			mui.back = function() {
			    // 获取目标口窗口对象
			    var target = plus.webview.getWebviewById('mine_page.html');
			    
			    // 执行相应的事件
			    mui.fire(target, 'customEvent', {});
				
			    // 执行关闭
			    old_back();
			};
			
			function changed(year, month, num){
				mui.ajax(localStorage.getItem('request_url')+ "cost/change_local/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid') + "&year=" + year + "&month=" + month + "&num=" + num,
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						mui.toast(e.msg);
					},  
				    error:function(xhr,type,errorThrown){
						mui.toast('修改失败...');
						mui.alert(xhr.responseText)
				    }  
				});
			}
			
			
			
			
			document.getElementById('detail_list').addEventListener('tap', function(){
				mui.openWindow({
					url:'detail_list.html',
					id: 'detail_list.html'
				})
			})
		</script>
	</body>

</html>
